<template>
	<div id="seniority">
		<div id="userInfo">
			<el-descriptions :title="userName">
				<el-descriptions-item label="注册时间">
					{{user.registerTime}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<el-popconfirm title="确定要退出吗？" @confirm="logout">
						<el-link slot="reference" id="logout" type="warning">点此退出登录</el-link>
					</el-popconfirm>
					
				</el-descriptions-item>

			</el-descriptions>

		</div>
		<div id="power0" v-if="power==0">
			<div class="col">
				<el-col :sm="12" :lg="6">
					<el-result icon="error" title="未验证" subTitle="请答题考取白名单">
						<template slot="extra">
							<el-button id="answer" type="success" @click="startAnsweringQuestions" round>开始答题</el-button>
						</template>
					</el-result>
				</el-col>
			</div>
		</div>
		<div id="power1" v-if="power==1">
			<div class="col">
				<el-col :sm="12" :lg="6">
					<el-result icon="success" title="已验证" subTitle="已加入服务器白名单">
						<template slot="extra">
							<el-tag type="info">
								<i class="el-icon-chat-line-round"></i>
								如若进入服务器失败，请联系服主</el-tag>
						</template>
					</el-result>
				</el-col>
			</div>
		</div>

		<el-dialog id="paperDialog" :visible.sync="paperDialogVisible" width="100%" :show-close="false" :close-on-click-modal="false"
		 center>
			<h2 slot="title">静心思考，认真作答</h2>
			<div id="paper" v-if="thisKey==index" v-for="(problem,index) in problems">
				{{index+1}}.
				<el-tag id="problemTitle">{{problem.title}}</el-tag>
				<el-radio-group v-model="problems[index].correctOption">
					<el-radio v-if="problem.optionA!='' & problem.optionA!=null" label="A">A.{{problem.optionA}}</el-radio>
					<el-radio v-if="problem.optionB!='' & problem.optionB!=null" label="B">B.{{problem.optionB}}</el-radio>
					<el-radio v-if="problem.optionC!='' & problem.optionC!=null" label="C">C.{{problem.optionC}}</el-radio>
					<el-radio v-if="problem.optionD!='' & problem.optionD!=null" label="D">D.{{problem.optionD}}</el-radio>
					<el-radio v-if="problem.optionE!='' & problem.optionE!=null" label="E">E.{{problem.optionE}}</el-radio>
				</el-radio-group>
			</div>
			<span slot="footer" class="dialog-fotter">
				<el-button id="next" type="info" @click="back" :loading="loading" :disabled="thisKey==0" plain>上一题</el-button>
				<el-button id="back" type="success" @click="next" :loading="loading" :disabled="problems[thisKey].correctOption==null || problems[thisKey].correctOption==''"
				 v-if="thisKey+1<problems.length" plain>下一题</el-button>
				<el-button id="back" type="success" @click="handInThePaper" :loading="loading" :disabled="problems[thisKey].correctOption==null || problems[thisKey].correctOption==''"
				 v-if="thisKey+1==problems.length" plain>交卷</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'seniority',
		data() {
			return {
				user: {},
				power: 0,
				userName: "",
				paperDialogVisible: false,
				problems: [],
				paperFormRules: {
					correctOption: [{
						required: true,
						message: '请选择活动资源',
						trigger: 'change'
					}],
				},
				thisKey: 0,
				loading: false,
			}
		},
		created() {
			this.$axios.post("/user/getUserInfo").then(res => {
				this.user = res.data.data.user;
				this.power = res.data.data.user.power;
				this.userName = res.data.data.user.gameName + "<" + res.data.data.user.email + ">";
			})
		},
		methods: {
			startAnsweringQuestions() {
				this.$axios.post("/seniority/getProblem").then(res => {
					this.problems = res.data.data.problems;
				})
				this.paperDialogVisible = true;
			},
			next() {

				this.thisKey++;
			},
			back() {
				this.thisKey--;
			},
			handInThePaper() {
				let params = new URLSearchParams();
				params.append("paper", JSON.stringify(this.problems));
				this.$axios.post("/seniority/markingPaper", params).then(res => {
					console.log(res);
					if(res.data.code=="401"){
						this.paperDialogVisible = false;
						this.problems = [];
						this.$message.error(res.data.msg);
						this.thisKey = 0;
					}else if(res.data.code=="200"){
						this.$message.success(res.data.msg);
						location.reload();
					}
				});
			},
			logout(){
				window.localStorage.removeItem("mcsittoken");
				location.reload();
			},
		},
	}
</script>

<style scoped>
	#userInfo {
		padding: 50px;
	}

	#power0 {
		width: 100%;
		height: 100%;
		display: inline-block;
	}

	.col {
		width: 100%;
		height: 100%;
		display: inline-block;
	}

	.el-col {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}

	#answer {
		height: 50px;
		width: 150px;
		font-size: 15px;
	}

	#loginDialog .el-dialog {
		max-width: 600px;
		min-width: 250px;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.9);
	}

	#paper {
		position: relative;
		left: 48%;
		transform: translateX(-45%);
		display: inline-block;
		width: 600px;
		height: 300px;
	}

	#problemTitle {
		display: inline-block;
		margin-top: 20px;
		margin-bottom: 50px;
	}

	.el-radio-group {
		display: block;
		text-align: center;

	}

	#next,
	#back {
		width: 160px;
		height: 35px;
		margin: 0 100px;
	}

</style>
